<template>
    <div>
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" @closed="change(value1, value2, value4)"/>
            <van-dropdown-item v-model="value2" :options="option2" @closed="change(value1, value2, value4)"/>
            <!--这里得判断：维修、检查人员没有待分配选项-->
            <van-dropdown-item v-model="value4" :options="option4" @closed="change(value1, value2, value4)"/>
        </van-dropdown-menu>

        <router-view :key="$route.path + $route.query.t"></router-view>
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Tabs",
    data() {
        return {
            role: null,

            value1: '0',
            value2: 'a',
            value4: 'x',
            option1: [
                {text: '我的', value: '0'},
            ],
            option2: [
                {text: '待确认', value: 'a'},
                {text: '处理中', value: 'c'},
                {text: '待验证', value: 'd'},
                {text: '已完成', value: 'e'},
            ],
            option4: [
                {text: '普通', value: 'x'},
                {text: '异常', value: 'y'},
            ],
        }
    },

    methods: {
        change(value1, value2, value4) {
            this.$router.push({
                path: '/worksheet/sheetData',
                query: {
                    value1,
                    value2,
                    value4,
                    t: Date.now()
                }
            })
        },
    },

    mounted() {
        this.role = Number(sessionStorage.role);
        // console.log(typeof this.role, this.role)
        // eslint-disable-next-line no-constant-condition
        if (this.role === 2 || this.role === 3) {  //维修人员 or 监控人员
            this.option2 = [
                // { text: '待分配', value: 0},
                {text: '待确认', value: 'b'},
                {text: '处理中', value: 'c'},
                {text: '待验证', value: 'd'},
                {text: '已完成', value: 'e'},
            ];
            this.change('0', 'b', 'x');
        } else if(this.role === 1 || this.role === 0) {   //是leader或boss
            this.option2 = [
                {text: '待分配', value: 'a'},
                {text: '待确认', value: 'b'},
                {text: '处理中', value: 'c'},
                {text: '待验证', value: 'd'},
                {text: '已完成', value: 'e'},
            ];
            this.change('0', 'a', 'x');
        }
        this.change('0', 'b', 'x');
    },
}
</script>

<style scoped>
div:has(div.van-dropdown-menu__bar) {
    position: sticky;
    top: 0px;
    z-index: 100;
}
</style>
